<template>
  <div class="content">
    <div id="main" style="width: 100%;height:600px;"></div>
    <div id="pie" style="width: 100%;height:1000px;"></div>
  </div>

</template>
<script>
import router from '@/router/router-static'
import * as echarts from 'echarts';
export default {
  data() {
    return {
      pieChart: null,
      barChart: null
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (this.$storage.get('Token')) {
        this.$http({
          url: `${this.$storage.get('sessionTable')}/session`,
          method: "get"
        }).then(({data}) => {
          if (data && data.code != 0) {
            router.push({name: 'login'})
          }
        });
      } else {
        router.push({name: 'login'})
      }

      // 基于准备好的dom，初始化echarts实例
      var myChart =echarts.init(document.getElementById('main'));
      var pieChart = echarts.init(document.getElementById('pie'));

      this.barChart = echarts.init(document.getElementById('main'))
      this.pieChart =  echarts.init(document.getElementById('pie'))
      // 指定图表的配置项和数据
     /* var option = {

        tooltip: {},
        legend: {
          data: ['菜谱关注数']
        },
        xAxis: {
          type: 'category',
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', '羊毛衫', '雪纺衫', '裤子', '高跟鞋']
        },
        yAxis: {},
        series: [
          {
            name: '菜谱关注数',
            type: 'bar',
            data: [5, 20, 190, 10, 10, 20, 40, 60, 70, 20]
          }
        ]
      };*/


      // 使用刚指定的配置项和数据显示图表。
      //myChart.setOption(option);


      /*var pieOption = {
        tooltip: {},
        legend: {
          top: 'left'
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 200],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: []
          }
        ]
      };*/
      //pieChart.setOption(pieOption);

      //根据窗口的大小变动图表
     /* window.onresize = function() {
        myChart.resize();
        pieChart.resize();
      };*/
      this.$http({
        url: "index/scoreDistribution",
        method: "get"
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.renderPieChart(data.data)
        }
      });
      this.$http({
        url: "index/subjectScores",
        method: "get"
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.renderBarChart(data.data)
        }
      });
    },
    renderPieChart(data) {
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: data.map(item => item.name)
        },
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          data: data, // 直接使用后端返回的数据
          label: {
            show: true,
            formatter: '{b}\n{c}人({d}%)'
          }
        }]
      }
      this.pieChart.setOption(option)
    },

    renderBarChart(data) {
      const option = {
            title: {
              text: '学生平均分排名TOP4',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: '{b}: {c}分'
            },
            grid: {
              top: '15%',
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: data.map(item => item.name),
              axisLabel: {
                interval: 0,
                rotate: 0,
                textStyle: {
                  fontSize: 12
                }
              }
            },
            yAxis: {
              type: 'value',
              name: '分数',
              min: 0,
              max: 100,
              interval: 20,
              axisLabel: {
                formatter: '{value}分'
              }
            },
            series: [{
              name: '平均分',
              type: 'bar',
              barWidth: '40%',  // 设置柱子宽度
              data: data.map(item => ({
                value: item.avgScore,
                itemStyle: {
                  color: this.getScoreColor(item.avgScore),
                  borderRadius: [4, 4, 0, 0]  // 设置柱子顶部圆角
                }
              })),
              label: {
                show: true,
                position: 'top',
                formatter: '{c}分',
                textStyle: {
                  fontSize: 12,
                  fontWeight: 'bold'
                }
              }
            }]
      }
      this.barChart.setOption(option)
    },
// 根据分数返回不同的颜色
    getScoreColor(score) {
      if (score >= 90) return '#67C23A';      // 优秀-绿色
      if (score >= 80) return '#409EFF';      // 良好-蓝色
      if (score >= 60) return '#E6A23C';      // 及格-黄色
      return '#F56C6C';                       // 不及格-红色
    }

  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 500px;
  text-align: center;
  background: transparent;

  .main-text {
    font-size: 38px;
    font-weight: bold;
    margin-top: 15%;
  }

  .text {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
}

#home-chart {
  background: #ffffff;
  padding: 20px 0;
}
</style>